<template>
<div class="playController">
    <div class="left" @click="show=!show">
        <img :src="playlist[playCurrentIndex].al.picUrl" alt="">
        <div class="content">
            <div class="title">{{playlist[playCurrentIndex].al.name}}</div>
            <div class="tips">横滑可以切换上下首哦</div>
        </div>
    </div>
    <div class="right">
        <svg v-if="paused" class="icon" aria-hidden="true" @click="play">
            <use xlink:href="#icon-bofang1"></use>
        </svg>
<!--        停止-->
        <svg v-else class="icon" aria-hidden="true" @click="play">
            <use xlink:href="#icon-iconstop"></use>
        </svg>
<!--        列表-->
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-liebiao1"></use>
        </svg>
    </div>
<!--    子组件发送了 emit back的时候  这里就不展示了  @back= -->
<!--    参数 是函数-->
    <play-music :play="play" :paused='paused' @back="show=!show" v-show="show" :playDetail="playlist[playCurrentIndex]" ></play-music>
    <audio ref="audio" :src="`https://music.163.com/song/media/outer/url?id=${playlist[playCurrentIndex].id}.mp3`"></audio>
<!--    <audio ref="audio" :src="audioSrc"></audio>-->
    <!-- <div @click="download">下载</div> -->
<!--    这个东西播放 放一秒钟就没了-->
<!--    <audio src="https://music.163.com/song/media/outer/url?id=1486513704.mp3"></audio>-->

<!--    外链可以 但是我控制不了他-->
<!--    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1338159794&auto=1&height=66"></iframe>-->
</div>
</template>

<script>
import {
    mapState,
    mapMutations
} from 'vuex';
import playMusic from '@/components/playMusic.vue';
import DownLoadUtil from "../util/DownLoadUtil";
import {getAudioDownloadUrl} from "../api";
export default {
    data() {
        // console.log("this.playCurrentIndex")
        // console.log(this.playCurrentIndex)
        // this.playCurrentIndex
        // playController.vue?cf92:47 undefined
        // let audioSrc=`https://music.163.com/song/media/outer/url?id=${playlist[playCurrentIndex].id}.mp3`
        // let audioSrc=`https://music.163.com/song/media/outer/url?id=${this.playlist[this.playCurrentIndex].id}.mp3`
        return {
            paused: true,
            show:false,
            // 直接放着不行吧
            // audioSrc:`https://music.163.com/song/media/outer/url?id=${playlist[playCurrentIndex].id}.mp3`
            // audioSrc:audioSrc
        }
    },
    computed: {
        ...mapState(['playlist', 'playCurrentIndex']),
        // audioSrc:`https://music.163.com/song/media/outer/url?id=${this.playlist[this.playCurrentIndex].id}.mp3`
    },
    mounted() {
        console.log([this.$refs.audio])
        this.$store.dispatch('reqLyric',{id:this.playlist[this.playCurrentIndex].id})

    },
    updated() {
        // console.log(  this. audioSrc)
        //
        // DownLoadUtil.downloadMp3()
        // DownLoadUtil.DownLoadUtil.downloadMp3()
        console.log(this.playlist[this.playCurrentIndex])
        this.$store.dispatch('reqLyric',{id:this.playlist[this.playCurrentIndex].id})

    },
    methods: {
        download:async function(){

           // let audioSrc  =`https://music.163.com/song/media/outer/url?id=${this.playlist[this.playCurrentIndex].id}.mp3`
           // let audioDownloadUrl =`https:///song/download/url?id=${this.playlist[this.playCurrentIndex].id}.mp3`
            let songId=this.playlist[this.playCurrentIndex].id
          let data=await  getAudioDownloadUrl(songId)
            console.log("data")
            console.log(data)
            console.log(  "this. audioSrc")
            // console.log(  this. audioSrc)
            // console.log(  audioSrc)
            // /song/download/url
            // DownLoadUtil.downloadMp3( this. audioSrc)
            // DownLoadUtil.downloadMp3( audioSrc)
        },
        play: function () {
            // 播放的时候才能拿到。。？
          let audio=  this.$refs.audio
            if(audio===null||audio===undefined){
                return
            }
            // 换了播放 肯定是pause了吧
            // playController.vue?cf92:93 Uncaught TypeError: Cannot read properties of null (reading 'currentTime')
            console.log(this.$refs.audio.currentTime)
            let nowPaused =this.$refs.audio.paused
            console.log("nowPaused")
            console.log(nowPaused)
            if (this.$refs.audio.paused) {
                // 播放不了啊

                console.log("开始播放")
                this.$refs.audio.play()
                this.paused = false
                // this.paused = true
                this.UpdateTime()
            } else {
                // 是在播放的
                this.$refs.audio.pause()
                this.paused = true
                // this.paused = false
                clearInterval(this.$store.state.id)
            }
            // this.paused = true
            console.log("==============")
            console.log("play")
            console.log("this.paused ")
            console.log(this.paused )
            // 图标怎么搞的
            // 中括号 才能打印 看到
            console.log([this.$refs.audio])

        },
        UpdateTime(){
            this.$store.state.id = setInterval(()=>{
                // console.log("this.$refs.audio")
                // console.log(this.$refs.audio)
                // 可以打印 为啥是null
                // 点击上一首就是null
              let audio=   this.$refs.audio
                if(audio===null){
                    return
                }
                this.$store.commit('setCurrentTime',this.$refs.audio.currentTime)
            },1000)
        }

    },
    components:{
        playMusic
    }
}
</script>

<style lang="less">
.playController {
    background: #fff;
    width: 7.5rem;
    height: 1.2rem;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #ccc;
    z-index: 100;

    .left {
        display: flex;
        padding: 0 0.2rem;

        img {
            width: 0.8rem;
            height: 0.8rem;
            border-radius: 0.4rem;
        }

        .content {
            padding: 0 0.2rem;

            .tips {
                font-size: 0.2rem;
                color: #999;
            }
        }
    }

    .right {
        .icon {
            width: 0.4rem;
            height: 0.4rem;
            margin: 0 0.2rem;
        }
    }
}
</style>
